<template>
  <div class="one">
    <!-- 推荐 -->
    <section v-for="(tab,index) in tabData" :key="index">
      <tab scroll-threshold='6'
      active-color='#FF405B'>
        <tab-item selected>{{tabData.tabs[0].name}}</tab-item>
        <tab-item>{{tabData.tabs[1].name}}</tab-item>
        <tab-item>{{tabData.tabs[2].name}}</tab-item>
        <tab-item>{{tabData.tabs[3].name}}</tab-item>
        <tab-item>{{tabData.tabs[4].name}}</tab-item>
        <tab-item>{{tabData.tabs[5].name}}</tab-item>
      </tab>
    </section>
    <!-- 轮播 -->
    <section  id="contener">
        <swiper dots-position='center' auto height="45vw">
      <swiper-item  class="black">
          <img  id="im" :src="swipers.blocks[0].block_items[0].item_image" alt="">
      </swiper-item>
      <swiper-item  class="black">
          <img id="im" :src="swipers.blocks[0].block_items[1].item_image" alt="">
      </swiper-item>
      <swiper-item  class="black">
          <img id="im" :src="swipers.blocks[0].block_items[2].item_image" alt="">
      </swiper-item>
      <swiper-item  class="black">
          <img id="im" :src="swipers.blocks[0].block_items[3].item_image" alt="">
      </swiper-item>
      <swiper-item  class="black">
          <img id="im" :src="swipers.blocks[0].block_items[4].item_image" alt="">
      </swiper-item>
    </swiper>
    </section>

    <!-- 箱包 -->
 <section>
        <img id="mi" :src="swipers.blocks[1].block_items[0].item_image" alt="">
        <img id="mi" :src="swipers.blocks[1].block_items[1].item_image" alt="">
        <img id="mi" :src="swipers.blocks[1].block_items[2].item_image" alt="">
        <img id="mi" :src="swipers.blocks[1].block_items[3].item_image" alt="">
        <!-- ****** -->
        <img id="mi" :src="swipers.blocks[2].block_items[0].item_image" alt="">
        <img id="mi" :src="swipers.blocks[2].block_items[1].item_image" alt="">
        <img id="mi" :src="swipers.blocks[2].block_items[2].item_image" alt="">
        <img id="mi" :src="swipers.blocks[2].block_items[3].item_image" alt="">
        <!-- ****** -->
        
    </section>
    <!-- 圣诞 -->
    <section>
        <img id="chris" :src="swipers.blocks[3].block_items[0].item_image" alt="">
        <img id="chris" :src="swipers.blocks[3].block_items[1].item_image" alt="">
        <img id="chris" :src="swipers.blocks[3].block_items[2].item_image" alt="">
        <img id="chris" :src="swipers.blocks[3].block_items[3].item_image" alt="">
        <!-- ******* -->
        <img id="chris1" :src="swipers.blocks[4].block_items[0].item_image" alt="">
        <img id="chris1" :src="swipers.blocks[4].block_items[1].item_image" alt="">
        <img id="chris1" :src="swipers.blocks[4].block_items[2].item_image" alt="">
        <img id="chris1" :src="swipers.blocks[4].block_items[3].item_image" alt="">
        <!-- ***** -->
        <img id="chris2" :src="swipers.blocks[5].block_items[0].item_image" alt="">
        <img id="chris2" :src="swipers.blocks[5].block_items[1].item_image" alt="">
        <img id="chris2" :src="swipers.blocks[5].block_items[2].item_image" alt="">
        <img id="chris2" :src="swipers.blocks[5].block_items[3].item_image" alt="">
        <!-- **** -->
        <img id="chris3" :src="swipers.blocks[6].block_items[0].item_image" alt="">
        <!-- **** -->
        <img id="chris4" :src="swipers.blocks[7].block_items[0].item_image" alt="">
        <!-- **** -->
        <img id="chris5" :src="swipers.blocks[8].block_items[0].item_image" alt="">
        <img id="chris5" :src="swipers.blocks[8].block_items[1].item_image" alt="">
        <img id="chris5" :src="swipers.blocks[8].block_items[2].item_image" alt="">
        <!-- **** -->
        <img id="chris6" :src="swipers.blocks[9].block_items[0].item_image" alt="">
        <img id="chris6" :src="swipers.blocks[9].block_items[1].item_image" alt="">
        <img id="chris6" :src="swipers.blocks[9].block_items[2].item_image" alt="">
    </section>
   <br>
   <div id="chris7">
            <p>每日新品</p> <p>查看更多</p><p>></p>
        </div>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="swip[0].entity.imgs[0]" alt="">
              <p>{{swip[0].entity.title}}</p>
              <p>{{'￥'+swip[0].entity.price / 100}}</p>
              <p>{{'￥'+swip[0].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[1].entity.imgs[0]" alt="">
              <p >{{swip[1].entity.title}}</p>
              <p>{{'￥'+swip[1].entity.price / 100}}</p>
              <p>{{'￥'+swip[1].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[2].entity.imgs[0]" alt="">
              <p >{{swip[2].entity.title}}</p>
              <p>{{'￥'+swip[2].entity.price / 100}}</p>
              <p>{{'￥'+swip[2].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[3].entity.imgs[0]" alt="">
              <p >{{swip[3].entity.title}}</p>
              <p>{{'￥'+swip[3].entity.price / 100}}</p>
              <p>{{'￥'+swip[3].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[4].entity.imgs[0]" alt="">
              <p >{{swip[4].entity.title}}</p>
              <p>{{'￥'+swip[4].entity.price / 100}}</p>
              <p>{{'￥'+swip[4].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[5].entity.imgs[0]" alt="">
              <p >{{swip[5].entity.title}}</p>
              <p>{{'￥'+swip[5].entity.price / 100}}</p>
              <p>{{'￥'+swip[5].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="swip[6].entity.imgs[0]" alt="">
              <p >{{swip[6].entity.title}}</p>
              <p>{{'￥'+swip[6].entity.price / 100}}</p>
              <p>{{'￥'+swip[6].entity.special_price / 100}}</p>
          </div>
      </div>
      <div id="tes">
          
      </div>
    </scroller>
   </section>
   <br>
   <!-- ****** -->
   <div id="chris7">
            <p>冬季爆款|年终清仓</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="winter[0].entity.imgs[0]" alt="">
              <p>{{winter[0].entity.title}}</p>
              <p>{{'￥'+winter[0].entity.price / 100}}</p>
              <p>{{'￥'+winter[0].entity.special_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="winter[1].entity.imgs[0]" alt="">
              <p>{{winter[1].entity.title}}</p>
              <p>{{'￥'+winter[1].entity.price / 100}}</p>
              <p>{{'￥'+winter[1].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="winter[2].entity.imgs[0]" alt="">
              <p>{{winter[2].entity.title}}</p>
              <p>{{'￥'+winter[2].entity.price / 100}}</p>
              <p>{{'￥'+winter[2].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="winter[3].entity.imgs[0]" alt="">
              <p>{{winter[3].entity.title}}</p>
              <p>{{'￥'+winter[3].entity.price / 100}}</p>
              <p>{{'￥'+winter[3].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="winter[4].entity.imgs[0]" alt="">
              <p>{{winter[4].entity.title}}</p>
              <p>{{'￥'+winter[4].entity.price / 100}}</p>
              <p>{{'￥'+winter[4].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="winter[5].entity.imgs[0]" alt="">
              <p>{{winter[5].entity.title}}</p>
              <p>{{'￥'+winter[5].entity.price / 100}}</p>
              <p>{{'￥'+winter[5].entity.special_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="winter[6].entity.imgs[0]" alt="">
              <p>{{winter[6].entity.title}}</p>
              <p>{{'￥'+winter[6].entity.price / 100}}</p>
              <p>{{'￥'+winter[6].entity.special_price / 100}}</p>
          </div>
      </div>
      <div id="tes">
          
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>反季清仓特价</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="versa[0].entity.small_img" alt="">
              <p>{{versa[0].entity.title}}</p>
              <p>{{'￥'+versa[0].entity.price / 100}}</p>
              <p>{{'￥'+versa[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="versa[1].entity.small_img" alt="">
              <p>{{versa[1].entity.title}}</p>
              <p>{{'￥'+versa[1].entity.price / 100}}</p>
              <p>{{'￥'+versa[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="versa[2].entity.small_img" alt="">
              <p>{{versa[2].entity.title}}</p>
              <p>{{'￥'+versa[2].entity.price / 100}}</p>
              <p>{{'￥'+versa[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="versa[3].entity.small_img" alt="">
              <p>{{versa[3].entity.title}}</p>
              <p>{{'￥'+versa[3].entity.price / 100}}</p>
              <p>{{'￥'+versa[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="versa[4].entity.small_img" alt="">
              <p>{{versa[4].entity.title}}</p>
              <p>{{'￥'+versa[4].entity.price / 100}}</p>
              <p>{{'￥'+versa[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="versa[5].entity.small_img" alt="">
              <p>{{versa[5].entity.title}}</p>
              <p>{{'￥'+versa[5].entity.price / 100}}</p>
              <p>{{'￥'+versa[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="versa[6].entity.small_img" alt="">
              <p>{{versa[6].entity.title}}</p>
              <p>{{'￥'+versa[6].entity.price / 100}}</p>
              <p>{{'￥'+versa[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>最新潮款|年终特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="newest[0].entity.small_img" alt="">
              <p>{{newest[0].entity.title}}</p>
              <p>{{'￥'+newest[0].entity.price / 100}}</p>
              <p>{{'￥'+newest[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="newest[1].entity.small_img" alt="">
              <p>{{newest[1].entity.title}}</p>
              <p>{{'￥'+newest[1].entity.price / 100}}</p>
              <p>{{'￥'+newest[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="newest[2].entity.small_img" alt="">
              <p>{{newest[2].entity.title}}</p>
              <p>{{'￥'+newest[2].entity.price / 100}}</p>
              <p>{{'￥'+newest[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="newest[3].entity.small_img" alt="">
              <p>{{newest[3].entity.title}}</p>
              <p>{{'￥'+newest[3].entity.price / 100}}</p>
              <p>{{'￥'+newest[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="newest[4].entity.small_img" alt="">
              <p>{{newest[4].entity.title}}</p>
              <p>{{'￥'+newest[4].entity.price / 100}}</p>
              <p>{{'￥'+newest[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="newest[5].entity.small_img" alt="">
              <p>{{newest[5].entity.title}}</p>
              <p>{{'￥'+newest[5].entity.price / 100}}</p>
              <p>{{'￥'+newest[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="newest[6].entity.small_img" alt="">
              <p>{{newest[6].entity.title}}</p>
              <p>{{'￥'+newest[6].entity.price / 100}}</p>
              <p>{{'￥'+newest[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>新款上架|年终清仓</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="annual[0].entity.small_img" alt="">
              <p>{{annual[0].entity.title}}</p>
              <p>{{'￥'+annual[0].entity.price / 100}}</p>
              <p>{{'￥'+annual[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="annual[1].entity.small_img" alt="">
              <p>{{annual[1].entity.title}}</p>
              <p>{{'￥'+annual[1].entity.price / 100}}</p>
              <p>{{'￥'+annual[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="annual[2].entity.small_img" alt="">
              <p>{{annual[2].entity.title}}</p>
              <p>{{'￥'+annual[2].entity.price / 100}}</p>
              <p>{{'￥'+annual[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="annual[3].entity.small_img" alt="">
              <p>{{annual[3].entity.title}}</p>
              <p>{{'￥'+annual[3].entity.price / 100}}</p>
              <p>{{'￥'+annual[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="annual[4].entity.small_img" alt="">
              <p>{{annual[4].entity.title}}</p>
              <p>{{'￥'+annual[4].entity.price / 100}}</p>
              <p>{{'￥'+annual[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="annual[5].entity.small_img" alt="">
              <p>{{annual[5].entity.title}}</p>
              <p>{{'￥'+annual[5].entity.price / 100}}</p>
              <p>{{'￥'+annual[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="annual[6].entity.small_img" alt="">
              <p>{{annual[6].entity.title}}</p>
              <p>{{'￥'+annual[6].entity.price / 100}}</p>
              <p>{{'￥'+annual[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
    <br>
   <!-- **** -->
   <div id="chris7">
            <p>拉杆箱特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="baks[0].entity.small_img" alt="">
              <p>{{baks[0].entity.title}}</p>
              <p>{{'￥'+baks[0].entity.price / 100}}</p>
              <p>{{'￥'+baks[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="baks[1].entity.small_img" alt="">
              <p>{{baks[1].entity.title}}</p>
              <p>{{'￥'+baks[1].entity.price / 100}}</p>
              <p>{{'￥'+baks[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="baks[2].entity.small_img" alt="">
              <p>{{baks[2].entity.title}}</p>
              <p>{{'￥'+baks[2].entity.price / 100}}</p>
              <p>{{'￥'+baks[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="baks[3].entity.small_img" alt="">
              <p>{{baks[3].entity.title}}</p>
              <p>{{'￥'+baks[3].entity.price / 100}}</p>
              <p>{{'￥'+baks[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="baks[4].entity.small_img" alt="">
              <p>{{baks[4].entity.title}}</p>
              <p>{{'￥'+baks[4].entity.price / 100}}</p>
              <p>{{'￥'+baks[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="baks[5].entity.small_img" alt="">
              <p>{{baks[5].entity.title}}</p>
              <p>{{'￥'+baks[5].entity.price / 100}}</p>
              <p>{{'￥'+baks[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="baks[6].entity.small_img" alt="">
              <p>{{baks[6].entity.title}}</p>
              <p>{{'￥'+baks[6].entity.price / 100}}</p>
              <p>{{'￥'+baks[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>经典基本款</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="sutra[0].entity.small_img" alt="">
              <p>{{sutra[0].entity.title}}</p>
              <p>{{'￥'+sutra[0].entity.price / 100}}</p>
              <p>{{'￥'+sutra[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="sutra[1].entity.small_img" alt="">
              <p>{{sutra[1].entity.title}}</p>
              <p>{{'￥'+sutra[1].entity.price / 100}}</p>
              <p>{{'￥'+sutra[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="sutra[2].entity.small_img" alt="">
              <p>{{sutra[2].entity.title}}</p>
              <p>{{'￥'+sutra[2].entity.price / 100}}</p>
              <p>{{'￥'+sutra[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="sutra[3].entity.small_img" alt="">
              <p>{{sutra[3].entity.title}}</p>
              <p>{{'￥'+sutra[3].entity.price / 100}}</p>
              <p>{{'￥'+sutra[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="sutra[4].entity.small_img" alt="">
              <p>{{sutra[4].entity.title}}</p>
              <p>{{'￥'+sutra[4].entity.price / 100}}</p>
              <p>{{'￥'+sutra[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="sutra[5].entity.small_img" alt="">
              <p>{{sutra[5].entity.title}}</p>
              <p>{{'￥'+sutra[5].entity.price / 100}}</p>
              <p>{{'￥'+sutra[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="sutra[6].entity.small_img" alt="">
              <p>{{sutra[6].entity.title}}</p>
              <p>{{'￥'+sutra[6].entity.price / 100}}</p>
              <p>{{'￥'+sutra[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>复古潮包</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="retro[0].entity.small_img" alt="">
              <p>{{retro[0].entity.title}}</p>
              <p>{{'￥'+retro[0].entity.price / 100}}</p>
              <p>{{'￥'+retro[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="retro[1].entity.small_img" alt="">
              <p>{{retro[1].entity.title}}</p>
              <p>{{'￥'+retro[1].entity.price / 100}}</p>
              <p>{{'￥'+retro[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="retro[2].entity.small_img" alt="">
              <p>{{retro[2].entity.title}}</p>
              <p>{{'￥'+retro[2].entity.price / 100}}</p>
              <p>{{'￥'+retro[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="retro[3].entity.small_img" alt="">
              <p>{{retro[3].entity.title}}</p>
              <p>{{'￥'+retro[3].entity.price / 100}}</p>
              <p>{{'￥'+retro[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="retro[4].entity.small_img" alt="">
              <p>{{retro[4].entity.title}}</p>
              <p>{{'￥'+retro[4].entity.price / 100}}</p>
              <p>{{'￥'+retro[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="retro[5].entity.small_img" alt="">
              <p>{{retro[5].entity.title}}</p>
              <p>{{'￥'+retro[5].entity.price / 100}}</p>
              <p>{{'￥'+retro[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="retro[6].entity.small_img" alt="">
              <p>{{retro[6].entity.title}}</p>
              <p>{{'￥'+retro[6].entity.price / 100}}</p>
              <p>{{'￥'+retro[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>品牌冬装|专场特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="brand[0].entity.small_img" alt="">
              <p>{{brand[0].entity.title}}</p>
              <p>{{'￥'+brand[0].entity.price / 100}}</p>
              <p>{{'￥'+brand[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="brand[1].entity.small_img" alt="">
              <p>{{brand[1].entity.title}}</p>
              <p>{{'￥'+brand[1].entity.price / 100}}</p>
              <p>{{'￥'+brand[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="brand[2].entity.small_img" alt="">
              <p>{{brand[2].entity.title}}</p>
              <p>{{'￥'+brand[2].entity.price / 100}}</p>
              <p>{{'￥'+brand[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="brand[3].entity.small_img" alt="">
              <p>{{brand[3].entity.title}}</p>
              <p>{{'￥'+brand[3].entity.price / 100}}</p>
              <p>{{'￥'+brand[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="brand[4].entity.small_img" alt="">
              <p>{{brand[4].entity.title}}</p>
              <p>{{'￥'+brand[4].entity.price / 100}}</p>
              <p>{{'￥'+brand[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="brand[5].entity.small_img" alt="">
              <p>{{brand[5].entity.title}}</p>
              <p>{{'￥'+brand[5].entity.price / 100}}</p>
              <p>{{'￥'+brand[5].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="brand[6].entity.small_img" alt="">
              <p>{{brand[6].entity.title}}</p>
              <p>{{'￥'+brand[6].entity.price / 100}}</p>
              <p>{{'￥'+brand[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>冬季板鞋|专场特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="shoes[0].entity.small_img" alt="">
              <p>{{shoes[0].entity.title}}</p>
              <p>{{'￥'+shoes[0].entity.price / 100}}</p>
              <p>{{'￥'+shoes[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="shoes[1].entity.small_img" alt="">
              <p>{{shoes[1].entity.title}}</p>
              <p>{{'￥'+shoes[1].entity.price / 100}}</p>
              <p>{{'￥'+shoes[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="shoes[2].entity.small_img" alt="">
              <p>{{shoes[2].entity.title}}</p>
              <p>{{'￥'+shoes[2].entity.price / 100}}</p>
              <p>{{'￥'+shoes[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="shoes[3].entity.small_img" alt="">
              <p>{{shoes[3].entity.title}}</p>
              <p>{{'￥'+shoes[3].entity.price / 100}}</p>
              <p>{{'￥'+shoes[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="shoes[4].entity.small_img" alt="">
              <p>{{shoes[4].entity.title}}</p>
              <p>{{'￥'+shoes[4].entity.price / 100}}</p>
              <p>{{'￥'+shoes[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="shoes[5].entity.small_img" alt="">
              <p>{{shoes[5].entity.title}}</p>
              <p>{{'￥'+shoes[5].entity.price / 100}}</p>
              <p>{{'￥'+shoes[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="shoes[6].entity.small_img" alt="">
              <p>{{shoes[6].entity.title}}</p>
              <p>{{'￥'+shoes[6].entity.price / 100}}</p>
              <p>{{'￥'+shoes[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>眼睛专场|年末清仓</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="eyes[0].entity.small_img" alt="">
              <p>{{eyes[0].entity.title}}</p>
              <p>{{'￥'+eyes[0].entity.price / 100}}</p>
              <p>{{'￥'+eyes[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="eyes[1].entity.small_img" alt="">
              <p>{{eyes[1].entity.title}}</p>
              <p>{{'￥'+eyes[1].entity.price / 100}}</p>
              <p>{{'￥'+eyes[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="eyes[2].entity.small_img" alt="">
              <p>{{eyes[2].entity.title}}</p>
              <p>{{'￥'+eyes[2].entity.price / 100}}</p>
              <p>{{'￥'+eyes[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="eyes[3].entity.small_img" alt="">
              <p>{{eyes[3].entity.title}}</p>
              <p>{{'￥'+eyes[3].entity.price / 100}}</p>
              <p>{{'￥'+eyes[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="eyes[4].entity.small_img" alt="">
              <p>{{eyes[4].entity.title}}</p>
              <p>{{'￥'+eyes[4].entity.price / 100}}</p>
              <p>{{'￥'+eyes[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="eyes[5].entity.small_img" alt="">
              <p>{{eyes[5].entity.title}}</p>
              <p>{{'￥'+eyes[5].entity.price / 100}}</p>
              <p>{{'￥'+eyes[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="eyes[6].entity.small_img" alt="">
              <p>{{eyes[6].entity.title}}</p>
              <p>{{'￥'+eyes[6].entity.price / 100}}</p>
              <p>{{'￥'+eyes[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>男士鞋履|品质特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="men[0].entity.small_img" alt="">
              <p>{{men[0].entity.title}}</p>
              <p>{{'￥'+men[0].entity.price / 100}}</p>
              <p>{{'￥'+men[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="men[1].entity.small_img" alt="">
              <p>{{men[1].entity.title}}</p>
              <p>{{'￥'+men[1].entity.price / 100}}</p>
              <p>{{'￥'+men[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="men[2].entity.small_img" alt="">
              <p>{{men[2].entity.title}}</p>
              <p>{{'￥'+men[2].entity.price / 100}}</p>
              <p>{{'￥'+men[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="men[3].entity.small_img" alt="">
              <p>{{men[3].entity.title}}</p>
              <p>{{'￥'+men[3].entity.price / 100}}</p>
              <p>{{'￥'+men[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="men[4].entity.small_img" alt="">
              <p>{{men[4].entity.title}}</p>
              <p>{{'￥'+men[4].entity.price / 100}}</p>
              <p>{{'￥'+men[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="men[5].entity.small_img" alt="">
              <p>{{men[5].entity.title}}</p>
              <p>{{'￥'+men[5].entity.price / 100}}</p>
              <p>{{'￥'+men[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="men[6].entity.small_img" alt="">
              <p>{{men[6].entity.title}}</p>
              <p>{{'￥'+men[6].entity.price / 100}}</p>
              <p>{{'￥'+men[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>男士内裤|品质特卖</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="small[0].entity.small_img" alt="">
              <p>{{small[0].entity.title}}</p>
              <p>{{'￥'+small[0].entity.price / 100}}</p>
              <p>{{'￥'+small[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="small[1].entity.small_img" alt="">
              <p>{{small[1].entity.title}}</p>
              <p>{{'￥'+small[1].entity.price / 100}}</p>
              <p>{{'￥'+small[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="small[2].entity.small_img" alt="">
              <p>{{small[2].entity.title}}</p>
              <p>{{'￥'+small[2].entity.price / 100}}</p>
              <p>{{'￥'+small[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="small[3].entity.small_img" alt="">
              <p>{{small[3].entity.title}}</p>
              <p>{{'￥'+small[3].entity.price / 100}}</p>
              <p>{{'￥'+small[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="small[4].entity.small_img" alt="">
              <p>{{small[4].entity.title}}</p>
              <p>{{'￥'+small[4].entity.price / 100}}</p>
              <p>{{'￥'+small[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="small[5].entity.small_img" alt="">
              <p>{{small[5].entity.title}}</p>
              <p>{{'￥'+small[5].entity.price / 100}}</p>
              <p>{{'￥'+small[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="small[6].entity.small_img" alt="">
              <p>{{small[6].entity.title}}</p>
              <p>{{'￥'+small[6].entity.price / 100}}</p>
              <p>{{'￥'+small[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>秋冬新款|限量低价</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="nice[0].entity.small_img" alt="">
              <p>{{nice[0].entity.title}}</p>
              <p>{{'￥'+nice[0].entity.price / 100}}</p>
              <p>{{'￥'+nice[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="nice[1].entity.small_img" alt="">
              <p>{{nice[1].entity.title}}</p>
              <p>{{'￥'+nice[1].entity.price / 100}}</p>
              <p>{{'￥'+nice[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="nice[2].entity.small_img" alt="">
              <p>{{nice[2].entity.title}}</p>
              <p>{{'￥'+nice[2].entity.price / 100}}</p>
              <p>{{'￥'+nice[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="nice[3].entity.small_img" alt="">
              <p>{{nice[3].entity.title}}</p>
              <p>{{'￥'+nice[3].entity.price / 100}}</p>
              <p>{{'￥'+nice[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="nice[4].entity.small_img" alt="">
              <p>{{nice[4].entity.title}}</p>
              <p>{{'￥'+nice[4].entity.price / 100}}</p>
              <p>{{'￥'+nice[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="nice[5].entity.small_img" alt="">
              <p>{{nice[5].entity.title}}</p>
              <p>{{'￥'+nice[5].entity.price / 100}}</p>
              <p>{{'￥'+nice[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="nice[6].entity.small_img" alt="">
              <p>{{nice[6].entity.title}}</p>
              <p>{{'￥'+nice[6].entity.price / 100}}</p>
              <p>{{'￥'+nice[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
   <br>
   <!-- **** -->
   <div id="chris7">
            <p>裤装专场|限量低价</p> <p>查看更多</p><p>></p>
        </div>
        <br>
   <section>
        <scroller lock-y :scrollbar-x=false>
      <div class="box1">
          <div>
              <img id="chris8" :src="thecow[0].entity.small_img" alt="">
              <p>{{thecow[0].entity.title}}</p>
              <p>{{'￥'+thecow[0].entity.price / 100}}</p>
              <p>{{'￥'+thecow[0].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="thecow[1].entity.small_img" alt="">
              <p>{{thecow[1].entity.title}}</p>
              <p>{{'￥'+thecow[1].entity.price / 100}}</p>
              <p>{{'￥'+thecow[1].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="thecow[2].entity.small_img" alt="">
              <p>{{thecow[2].entity.title}}</p>
              <p>{{'￥'+thecow[2].entity.price / 100}}</p>
              <p>{{'￥'+thecow[2].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="thecow[3].entity.small_img" alt="">
              <p>{{thecow[3].entity.title}}</p>
              <p>{{'￥'+thecow[3].entity.price / 100}}</p>
              <p>{{'￥'+thecow[3].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="thecow[4].entity.small_img" alt="">
              <p>{{thecow[4].entity.title}}</p>
              <p>{{'￥'+thecow[4].entity.price / 100}}</p>
              <p>{{'￥'+thecow[4].entity.tag_price / 100}}</p>
          </div>
          <div>
              <img id="chris8" :src="thecow[5].entity.small_img" alt="">
              <p>{{thecow[5].entity.title}}</p>
              <p>{{'￥'+thecow[5].entity.price / 100}}</p>
              <p>{{'￥'+thecow[5].entity.tag_price / 100}}</p>
          </div>
          <div>
             <img id="chris8" :src="thecow[6].entity.small_img" alt="">
              <p>{{thecow[6].entity.title}}</p>
              <p>{{'￥'+thecow[6].entity.price / 100}}</p>
              <p>{{'￥'+thecow[6].entity.tag_price / 100}}</p>
          </div>
      </div>
    </scroller>
   </section>
  </div>
</template>


<script>
import { Tab, TabItem,Swiper,SwiperItem } from "vux";
export default {
    components: {
        Tab,
        TabItem,
        Swiper,
        SwiperItem
      },
  data: function() {
    return {
        tabData: [],
        swipers:[],
        swip:[],
        winter:[],
        versa:[],
        newest:[],
        annual:[],
        baks:[],
        sutra:[],
        retro:[],
        brand:[],
        shoes:[],
        eyes:[],
        men:[],
        small:[],
        pants:[],
        nice:[],
        thecow:[],
    };
  },
  created() {
    this.taberData();
    this.swiperm();
    this.swips();
    this.winters();
    this.versas();
    this.newests();
    this.annuals();
    this.bakss();
    this.sutras();
    this.retros();
    this.brands();
    this.shoess();
    this.eyess();
    this.mens();
    this.smalls();
    this.pantss();
    this.nices();
    this.thecows();
  },
  methods: {
    taberData: function() {
      var _this = this;
      this.$http
        .get(
          "/wants/app/layout/tabs?ua=%7B%22version%22%3A%222.6.1%22%2C%22app_id%22%3A%22h6ybil3f9xuqws98h4%22%2C%22app_name%22%3A%22WANTS%E5%A5%BD%E7%89%A9%22%2C%22gender%22%3A%221%22%7D"
        )
        .then(function(value) {
         
          _this.tabData = value.body;
        });
    },
    swiperm:function(){
        var _this = this;
        this.$http.get('/wants/app/layout/tab/12?ua=%7B%22version%22%3A%222.6.1%22%2C%22app_id%22%3A%22h6ybil3f9xuqws98h4%22%2C%22app_name%22%3A%22WANTS%E5%A5%BD%E7%89%A9%22%2C%22gender%22%3A%221%22%7D'
        )
        .then(function(value){
            _this.swipers = value.body
        })
    },
    swips:function(){
        var _this = this;
        this.$http.get('/wants/aggregator/3752/41/entity?limit=9&limit=10').then(function(value){
            _this.swip = value.body
            
        })
    },
    winters:function(){
        var _this = this;
        this.$http.get('/wants/aggregator/3740/41/entity?limit=10&limit=10').then(function(value){
            _this.winter = value.body
        })
    },
    versas:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3758/41/entity?limit=10&limit=10').then(function(value){
            _this.versa = value.body
        })
    },
    newests:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3755/41/entity?limit=10&limit=10').then(function(value){
            _this.newest = value.body
        })
    },
    annuals:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3747/41/entity?limit=10&limit=10').then(function(value){
            _this.annual = value.body
        })
    },
    bakss:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3464/41/entity?limit=10&limit=10').then(function(value){
            _this.baks = value.body
        })
    },
    sutras:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3683/41/entity?limit=10&limit=10').then(function(value){
            _this.sutra = value.body
        })
    },
    retros:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3739/41/entity?limit=10&limit=10').then(function(value){
            _this.retro = value.body
        })
    },
    brands:function(){
        var _this = this 
        this.$http.get('/wants/aggregator/3732/41/entity?limit=10&limit=10').then(function(value){
            
            _this.brand = value.body
        })
    },
    shoess:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3733/41/entity?limit=10&limit=10').then(function(value){
            _this.shoes = value.body
        })
    },
    eyess:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3744/41/entity?limit=10&limit=10').then(function(value){
            _this.eyes = value.body
        })
    },
    mens:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3743/41/entity?limit=10&limit=10').then(function(value){
            _this.men = value.body
        })
    },
    smalls:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3682/41/entity?limit=10&limit=10').then(function(value){
            _this .small = value.body
        })
    },
    pantss:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3736/41/entity?limit=10&limit=10').then(function(value){
            _this.pants = value.body
        })
    },
    nices:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3736/41/entity?limit=10&limit=10').then(function(value){
            console.log(value)
            _this.nice = value.body
        })
    },
    thecows:function(){
        var _this = this
        this.$http.get('/wants/aggregator/3737/41/entity?limit=10&limit=10').then(function(value){
            _this.thecow =value.body
        })
    }
  }
};
</script>
<style scoped>
#details{
    width: 100%;
    /* height: 100vh; */
}
.one{
    width:100%;
}
#im{
    width: 100% !important;
    height: 50vw;
}
#mi{
    width: 25.5vw;
    height: 25vw;
    padding: 0;
    margin: -1vw;
}
#chris{
    width: 25.5vw;
    height: 20vw;
    margin: -1vw;
}
#chris1{
    width: 25.5vw;
    height: 30vw;
    margin: -1vw;
}
#chris2{
    width: 25.5vw;
    height: 30vw;
    margin: -1vw;
}
#chris3{
    width: 100%;
    height: 10vw;
    margin: -1vw;
}
#chris4{
    width: 100%;
    height: 25vw;
}
#chris5{
    width: 34vw;
    height: 25vw;
    margin: -1vw;
    border: 2px solid red;
}
#chris6{
    width: 34vw;
    height: 25vw;
    margin: -1vw;
    border: 2px solid red;
}
#chris7{
    display: flex;
    position: relative;
}
#chris7 p:nth-child(1){
    margin-left: 4vw;
    letter-spacing:0.5vw;
}
#chris7 p:nth-child(2){
position: absolute;
left: 70vw;
}
#chris7 p:nth-child(3){
   position: absolute;
    left: 90vw;
}
#chris8{
    width: 25vw;
    height: 25vw;
}
.box1{
    display: flex;
    width: 200vw;
    overflow: hidden;
}
.box1 img{
    padding-left:4vw;
}
.box1 p{
    font-size: 1vw;
    width: 20vw;
    margin: 0 4vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box1 p:nth-child(3){
    font-size: 1vw;
    width: 10vw;
    color: red;
    margin: 0 2vw;
}
.box1 p:nth-child(4){
    color: gray;
    text-decoration:line-through;
    position: relative;
    bottom: 4vw;
    left: 5vw;
}
</style>